# Allow Users to Add Extended Fields

**Category:** Features/Enrich/Data Extension

## Guide

This guide shows you how to let users add and manage extended fields.

By the end, they'll be able to click **Add Field** from the customize columns view or the entity page and see a modal like this:

![Add field](./data-extension-add-field.png)

### Before you begin

Make sure that you have:

* A Patterns [`Table`](./?path=%2Fstory%2Fbase-components-collections-table-table--table) component.
* A server configured to [support data extensions](https://dev.wix.com/docs/rnd-general/articles/open-platform/data-extensions/data-extensions-101#backend).
* Set up the basics to [display extended fields in your table](.?path=/story/features-enrich-data-extension--display-extended-fields).

### Allow users to add extended fields

To manage extended fields from the entity page:

1. Wrap your entity page in a [`WidgetsFormProvider`](./?path=/story/base-components-providers--widgetsformprovider).

    ```diff
    + import { WidgetsFormProvider } from '@wix/patterns/page';
    
    export const MyPageProvider = ({ children }) => {
        return (
    +   
            
    +   
        );
    };
    ```

1. Add the [`CustomFieldsWidget`](./?path=/story/features-enrich-data-extension-components--customfieldswidget) component to your entity page.

    ```diff
      import { MyEntityCard } from '../components/MyEntityCard';
      import { MyEntity } from '@wix/ambassador-v1-entity/types';
    + import { CustomFieldsViewWidget } from '@wix/patterns';
    
      function MyPageContent({ entity }: { entity: MyEntity }) {
        return (
            
              
                
                  
                
    +           
    +             " />
    +           
              
            
        );
      }
    ```

1. Use the [`useWidgetsFormContext`](/?path=/story/common-hooks--usewidgetsformcontext) hook to get the state object and use it to validate the `CustomFieldsWidget` data.

    ```diff
      import { MyEntity } from '@wix/ambassador-v1-entity/types';
      import { updateEntity } from '@wix/ambassador-v1-entity/http';
    + import { useWidgetsFormContext } from '@wix/patterns';
    
      function MySaveButton({ entity }: { entity: MyEntity }) {
        const [isLoading, setLoading] = React.useState(false);
        const httpClient = useHttpClient();
    +   const state = useWidgetsFormContext();
    
        return (
           {
              setLoading(true);
    +         const { isValid, data } = await state.validate();
    +         if (isValid) {
                httpClient.request(updateEntity({
                  entity: {
                    ...entity
    +               extendedFields: data.extendedFields
                  }
                })).then(() => {
                  setLoading(false);
                });
    +         }
            }}
          >
            {isLoading ?  : 'Save'}
          
        );
      }
    ```

Now, users can manage extended fields effectively!

![Custom fields add button](./custom-fields-add-button.png)

### Change default permissions

You can change the default field permissions view by using the `defaultPermissions` prop. For an example, see the **Examples** tab of this article.

### See also

* [Data Extension Overview](./?path=/story/features-enrich-data-extension--data-extension-overview)

## Examples

### Override default permissions for the field

Use `defaultPermissions` to set the default permissions for new user added fields. For example, if certain entities can't be edited by site visitors, showing site visitor permissions is unnecessary and can be removed from view.

```tsx
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  DataExtension,
  useTableCollection,
  Table,
  CursorQuery,
} from '@wix/patterns';
import {
  Contact,
  SearchContactsRequest,
} from '@wix/ambassador-contacts-v5-contact/types';
import { searchContacts } from '@wix/ambassador-contacts-v5-contact/http';
import { useHttpClient } from '@wix/yoshi-flow-bm';

function DefaultPermissions() {
  const httpClient = useHttpClient();

  const state = useTableCollection<Contact>({
    queryName: 'contacts-DefaultPermissions',
    paginationMode: 'cursor',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    toExtendedFields: (item) => item.extendedFields,
    persistQueryToUrl: true,

    fetchData: async ({ search = '', cursor, limit }: CursorQuery) => {
      const querySearch: SearchContactsRequest = {
        search: {
          search: { expression: search, fields: ['name'] },
          cursorPaging: { limit, cursor },
        },
      };
      return await httpClient
        .request(searchContacts(querySearch))
        .then(({ data: { contacts, pagingMetadata } }) => ({
          items: contacts || [],
          total: pagingMetadata?.total,
          cursor: pagingMetadata?.cursors?.next,
        }));
    },
    fetchErrorMessage: ({ err }) => `Error: ${err}`,
    itemKey: (item) => item.id!,
    itemName: (item) => item.name?.first || '',
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <Table
          state={state}
          horizontalScroll
          dataExtension={
            <DataExtension
              defaultPermissions={{
                installedApps: {
                  defaultRead: true,
                  defaultWrite: true,
                },
                siteVisitors: {
                  hide: true,
                },
              }}
            />
          }
          columns={[
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (item) => item.name,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```